<template>
    <view class="index-container">
        <image src="@/static/img/logo.png" class="logo"></image>
        <view class="index-body-container">
            <text class="welcome">欢迎使用\n东兴边贸二级市场</text>
            <view class="index-item-container" @click="login('borderer_agent')">
                <image src="@/static/img/index/borderer_agent.png"></image>
                <text>边民代表登录</text>
            </view>
            <view class="index-item-container" @click="login('borderer')">
                <image src="@/static/img/index/borderer.png"></image>
                <text>边民登录</text>
            </view>
            <view class="index-item-container" @click="login('security')">
                <image src="@/static/img/index/security.png"></image>
                <text>保安登录</text>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, watch } from 'vue';
function login(userType) {
    uni.navigateTo({
        url: `/pages/login/index?userType=${userType}`
    });
}
</script>

<style lang="scss" scoped>
@import '@/static/css/common.scss';
.index-container {
    @extend .column-container-layout;
    background-image: url('@/static/img/index/background.png');
    background-size: 100% 100%;
    align-items: center;
    justify-content: center;
    .logo {
        position: absolute;
        right: 10%;
        top: 10%;
        width: $scale * 80rpx;
        height: $scale * 114rpx;
    }
    .index-body-container {
        @extend .column-layout;
        padding: $scale * 20rpx;
        margin-top: $scale * 100rpx;
        .welcome {
            font-size: $scale * 30rpx;
            margin-bottom: $scale * 20px;
        }
        .index-item-container {
            @extend .row-layout;
            margin: $scale * 5px 0;
            padding: $scale * 10rpx;
            justify-content: center;
            align-items: center;
            background-color: rgba(131, 203, 255, 0.2);
            border-radius: $scale * 8rpx;
            image {
                width: $scale * 40rpx;
                height: $scale * 41rpx;
                margin: $scale * 15rpx;
            }
            text {
                width: $scale * 120rpx;
                font-size: $scale * 18rpx;
            }
        }
    }
}
</style>
